import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { Card, Descriptions, Button } from 'antd'
import { reqGetHosDetail } from '@api/hospitalList'
import { IhosDetail } from '@api/hospitalList/model/hospitalListTypes'

export default function HospitalShow() {
  const { id } = useParams()

  const [hosDetail, setHosDetail] = useState<IhosDetail>({})
  useEffect(() => {
    ;(async function () {
      const result = await reqGetHosDetail(id as string)
      setHosDetail(result)
    })()
  }, [])

  return (
    <Card>
      {/* 描述列表默认一行展示3列. column属性可以自定义一行几列 */}
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">
          {hosDetail.hospital?.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          <img
            width="80"
            src={'data:image/png;base64,' + hosDetail.hospital?.logoData}
            alt=""
          />
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {hosDetail.hospital?.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {hosDetail.hospital?.param.fullAddress}
        </Descriptions.Item>
        {/* span={2}表示这一项占一行中的2列的位置 */}
        <Descriptions.Item span={2} label="坐车路线">
          {hosDetail.hospital?.route}
        </Descriptions.Item>
        <Descriptions.Item span={2} label="医院简介">
          {hosDetail.hospital?.intro}
        </Descriptions.Item>
      </Descriptions>
      <Descriptions
        title="预约规则"
        bordered
        column={2}
        style={{ marginTop: 10, marginBottom: 10 }}
      >
        <Descriptions.Item label="预约周期">
          {hosDetail.bookingRule?.cycle}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
          {hosDetail.bookingRule?.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {hosDetail.bookingRule?.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
          {hosDetail.bookingRule?.quitTime}
        </Descriptions.Item>
        {/* span={2}表示这一项占一行中的2列的位置 */}
        <Descriptions.Item span={2} label="预约规则">
          {hosDetail.bookingRule?.rule}
        </Descriptions.Item>
      </Descriptions>
      <Button>返回</Button>
    </Card>
  )
}
